<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <!-- Font Awesome 图标库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<style>
    body {
        margin: 0;
        padding: 0;
        font-family: 'Roboto', sans-serif;
        background-color: #f8f9fa;
    }
    .container {
        display: flex;
        height: 100vh;
        padding: 20px;
        box-sizing: border-box;
    }
    .left {
        flex: 1;
        background-color: #2c3e50; /* 深蓝色背景 */
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        margin-right: 20px;
        color: #ecf0f1; /* 浅色文字 */
    }
    .left h2 {
        font-size: 1.5rem;
        font-weight: 500;
        margin-bottom: 20px;
        color: #ffffff;
        text-align: center;
    }
    .left ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .left ul li {
        margin-bottom: 10px;
    }
    .left ul li a {
        display: flex;
        align-items: center;
        padding: 10px 15px;
        color: #ecf0f1;
        text-decoration: none;
        border-radius: 4px;
        transition: background-color 0.3s ease, color 0.3s ease;
    }
    .left ul li a:hover {
        background-color: #34495e; /* 悬停背景色 */
        color: #ffffff;
    }
    .left ul li a i {
        margin-right: 10px;
        font-size: 1.2rem;
    }
    .left ul li a.active {
        background-color: #1abc9c; /* 选中状态背景色 */
        color: #ffffff;
    }
    .right {
        flex: 4;
        background-color: #ffffff;
        padding: 20px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }
    .table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    .table thead th {
        background-color: #34495e;
        color: #ffffff;
        padding: 12px;
        text-align: left;
    }
    .table tbody td {
        padding: 12px;
        border-bottom: 1px solid #e9ecef;
    }
    .table tbody tr:hover {
        background-color: #f1f1f1;
        transition: background-color 0.3s ease;
    }
    .table tbody tr:last-child td {
        border-bottom: none;
    }

</style>
<body>
<div class="container">
    <div class="left">
        <h2>学生管理系统</h2>
        <div th:include="left.html"></div>
    </div>
    <div class="right">
        <h2 style="text-align: center;font-weight:700">添加学生</h2>
        <form action="/Student/edit" class="was-validated" method="post">
            <div class="form-group">
                <label for="name">学生姓名:</label>
                <input type="text" class="form-control" id="name" placeholder="Enter username" name="name"  required>
                <div class="valid-feedback">验证成功！</div>
                <div class="invalid-feedback">请输入学生姓名！</div>
            </div>
            <div class="form-group">
                <label for="pwd">密码:</label>
                <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="password" required>
                <div class="valid-feedback">验证成功！</div>
                <div class="invalid-feedback">请输入密码！</div>
            </div>
            <div class="form-group">
                <label for="clazz">班级:</label>
                <input type="text" class="form-control" id="clazz" placeholder="Enter class" name="clazz" required>
                <div class="valid-feedback">验证成功！</div>
                <div class="invalid-feedback">请输入班级！</div>
            </div>
            <div class="form-group">
                <label for="exampleRadios1">性别:</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="sex" id="exampleRadios1" value="1" checked>
                    <label class="form-check-label" for="exampleRadios1">
                        男
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="sex" id="exampleRadios2" value="0">
                    <label class="form-check-label" for="exampleRadios2">
                        女
                    </label>
                </div>
            </div>
            <div class="form-group">
                <label for="birthday">生日:</label>
                <input type="date" class="form-control" id="birthday" name="birthday" required>
                <div class="valid-feedback">验证成功！</div>
                <div class="invalid-feedback">请选择生日！</div>
            </div>
            <div class="form-group form-check">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" name="remember" required> 同意协议
                    <div class="valid-feedback">验证成功！</div>
                    <div class="invalid-feedback">同意协议才能提交。</div>
                </label>
            </div>
            <button type="submit" class="btn btn-primary">修改学生</button>
        </form>
    </div>
</div>
<script src="/bootstrap/js/jquery.min.js" crossorigin="anonymous"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

</body>
</html>